<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单项数据流</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="box"></div>
		<script type="text/javascript">
		//   <div><test :num="params.num" :a="params.a" :b="params.b" :c="params.c"></test></div>等同于v-bind="params"
		// 父组件传参用 :content-abc="d"，子组件接受用contentAbc命名
		// 单向数据流概念:父组件可以给子组件传值过去，但是在子组件中数据是不可更改的。(子组件不能反向修改父组件)
  			const app = Vue.createApp({
				data(){
					return{
						params:{
							num:123,
							a:456,
							b:789,
							c:10,
							d:123
						}
					}
				},
				// 父组件
				template:`
				<div><test :d="params.d"></test></div>
				`
			});
			// 子组件
			app.component('test',{
				props:['num','a','b','c','d'],
				template:`<div @click="d += 1">--{{num}}--{{a}}--{{b}}--{{c}}--{{d}}</div>`
			});
			const vm = app.mount("#box");
		</script>
	</body>
</html>
